<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #000;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div>
            <button class="btn">修改</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>
    // 节点: 文档节点 元素节点 属性节点 文本节点 注释节点

    // 节点删除:
    // Element.remove()                 自删(元素自己删除自己) 
    // parentElement.removeChild(node)  父删(通过父节点删除子节点) => 大义灭亲(前提:被删除的节点必须是父元素的子(代)节点)


    // 节点修改/替换: (由父元素统筹,喜新厌旧)
    // parentElement.replaceChild(newNode,oldNode)   再父元素中,用一个节点(新的节点/已存在的)替换另一个节点(已存在的)



    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");
    var btn = document.querySelector(".btn");


    // 点击修改按钮 => 创建一个新的li,替换mid



    btn.onclick = function () {

        if (mid) {
            var ele = document.createElement("li"); // 创建元素节点 li => 赋值给变量ele
            console.log(ele);

            // 被创建的元素节点就是一个正常的元素
            ele.setAttribute("class", "newLi"); //新增属性
            ele.innerText = "我是新增的li"; // 设置文本
            ele.style.background = "red"; // 设置样式
            ele.onclick = function () {  // 绑的事件
                console.log("我被点击了");
            }

            ul.replaceChild(ele, mid);

            mid = null;

        }




    }




</script>

</html>